<template>
	<view class="userinfo">
		<NavBarVue title="个人资料"></NavBarVue>
		<view class="card">
			<view class="card-actions">
				<!--  -->
				<FromList title="头像" class="mb-20">
					<UpImageVue :src="user.headimg" :image-styles="{width: 60, height: 60}" imgKey="headimg" @get-url="setUrl">
					</UpImageVue>
				</FromList>
				<!--  -->
				<FromList title="名称" class="mb-20">
					<uni-easyinput :styles="{background: 'transparent'}" style="text-align: right;" :inputBorder="false"
						v-model="user.nickname" placeholder="请输入名称(1-6个字)" />
				</FromList>
				<!--  -->
				<FromList title="性别" class="mb-20">
					<view class="flex">
						<view class="flex justify-center items-center ml-20" @click="user.gender=0">
							<view class="box-gender rounded-full flex items-center justify-center" :class="{active1: user.gender==0}"
								:style="{background:user.gender==0?'#FD6CFF':'#fff'}">
								<ImageBoxVue src="/static/icons/w_w_man.png" width="28rpx" height="28rpx" v-if="user.gender==0">
								</ImageBoxVue>
								<ImageBoxVue src="/static/icons/g_w_man.png" width="28rpx" height="28rpx" v-if="user.gender==1">
								</ImageBoxVue>
								<text class="ml-10">女</text>
							</view>
						</view>
						<view class="flex justify-center items-center ml-20" @click="user.gender=1">
							<view class="box-gender rounded-full flex items-center justify-center" :class="{active: user.gender==1}"
								:style="{background:user.gender==1?'#329EFF':'#fff'}">
								<ImageBoxVue src="/static/icons/g_man.png" width="28rpx" height="28rpx" v-if="user.gender==0">
								</ImageBoxVue>
								<ImageBoxVue src="/static/icons/w_man.png" width="28rpx" height="28rpx" v-if="user.gender==1">
								</ImageBoxVue>
								<text class="ml-10">男</text>
							</view>
						</view>
					</view>
				</FromList>
				<!--  -->
				<FromList title="电话" class="mb-20">
					<view class="flex items-center">
						<text>{{user.phone}}</text>
					</view>
				</FromList>
				<!--  -->
				<FromList title="生日" class="mb-20">
					<view class="flex flex-1 t-right items-center">
						<uni-datetime-picker type="date" v-model="user.birday_str"
							@change="changeBirday">{{ user.birday_str?user.birday_str.substr(0, 10) : '暂无填写' }}</uni-datetime-picker>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</FromList>
			</view>
		</view>

		<view class="card">
			<view class="card-actions">
				<FromList title="个人介绍" align="bottom">
					<uni-easyinput v-model="user.sig" type="textarea" placeholder="这个人很懒,还没有签名"></uni-easyinput>
				</FromList>
			</view>
		</view>

		<view class="p-30">
			<view @click="handleSubmit" class="userinfo-btn">保存</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		debounce
	} from '@/config/publicFun.js'
	import userApi from '@/apis/apiList/userApi';
	import FromList from '@/components/FromList.vue';
	import UpImageVue from "@/components/UpImage.vue";
	const userId = ref("")
	const user = ref({})

	// 获取个人信息
	const queryMemberInfo = () => {
		userApi.queryMemberInfo({
			id: userId.value
		}).then(res => {
			user.value = res.data
			console.log('用户信息', user.value);
		})
	}

	// 选择头像
	const setUrl = (key, url) => {
		console.log(key, url);
		user.value.headimg = url
	}

	// 保存
	const handleSubmit = debounce(() => {
		if (!user.value.headimg) {
			uni.showToast({
				icon: 'none',
				title: '请上传头像'
			})
			return
		}
		if (!user.value.nickname) {
			uni.showToast({
				icon: 'none',
				title: '请输入昵称'
			})
			return
		}
		if (!user.value.sig) {
			uni.showToast({
				icon: 'none',
				title: '请输入个性签名'
			})
			return
		}

		if (!user.value.birday_str) {
			uni.showToast({
				icon: 'none',
				title: '请选择生日'
			})
			return
		}
		userApi.memberEditInfo({
			id: user.value.id,
			nickname: user.value.nickname,
			birday_str: user.value.birday_str + ' 00:00:00',
			sig: user.value.sig,
			headimg: user.value.headimg,
			gender: user.value.gender,
		}).then(res => {
			userApi.queryMemberInfo({
				id: user.value.id
			}).then(res => {
				uni.setStorageSync("user", res.data)
				uni.showToast({
					title: '保存成功'
				})
				uni.navigateBack(-1)
			})
		})
	})

	// 选择生日时间
	const changeBirday = (val) => {
		console.log(val)
		user.value.birday_str = val
	}

	onShow(() => {
		userId.value = uni.getStorageSync('user').id
		queryMemberInfo()
	})
</script>

<style lang="scss" scoped>
	.box-gender {
		width: 240rpx;
		height: 70rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #E0EBF1;

		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
		}

		&.active {
			border-color: #FD6CFF !important;

			text {
				color: #fff;
			}
		}

		&.active {
			border-color: #329EFF;

			text {
				color: #fff;
			}
		}
	}

	.t-right {
		text-align: right;
	}

	.userinfo {
		position: relative;
		height: 100vh;
		overflow-y: auto;

		.card {
			width: 710rpx;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				font-size: 28rpx;
			}
		}

		.qian-content {
			margin-top: 20rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			width: 100%;
			min-height: 120px;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.card-actions {
			.card-actions-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 120rpx;

				.card-actions-item-text {
					font-size: 24rpx;
					color: #333;
					margin-right: 100rpx;
				}
			}
		}

		.userinfo-btn {
			position: fixed;
			bottom: 42rpx;
			left: 20rpx;
			width: 710rpx;
			height: 100rpx;
			border-radius: 60rpx;
			background: #329EFF;
			font-size: 30rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>